<template>
	<view style="" class="content">
		<view
			style="width: 100%;display: flex;justify-content: space-between;padding: 10rpx 20rpx;background: white;border-radius: 12rpx;align-items: center;">
			<view class="">
				红包金额
			</view>
			<view style="width: 60%;">
				<u-input input-align="right" v-model="money" :clearable="false" focus type="number" style="text-align: right;"
					placeholder="0"></u-input>
			</view>
		</view>

		<view
			style="width: 100%;display: flex;justify-content: space-between;padding: 10rpx 20rpx;background: white;border-radius: 12rpx;align-items: center;margin-top: 30rpx;">
			<view class="">
				留言内容
			</view>
			<view style="width: 60%;">
				<u-input input-align="right" v-model="content" :clearable="false" style="text-align: right;" placeholder="恭喜发财"></u-input>
			</view>
		</view>

		<view
			style="margin-top: 60rpx;font-weight: bold;font-size: 80rpx;align-items:center;display: flex;color: #181818;">
			<text style="font-size: 50rpx;">￥</text> <text>{{money?money:0}}</text>
		</view>

		<view style="width: 46%;padding: 25rpx;padding-top: 0rpx;margin-top: 60rpx;">
			<u-button @click="saveuser" type="error">放进红包</u-button>
		</view>

		<u-popup mode="bottom" border-radius="12" closeable v-model="show">
			<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
				<view style="margin-top: 80rpx;">
					发送红包
				</view>
				<view style="margin-top: 20rpx;">
					<text style="font-size: 30rpx;">￥</text> <text style="font-size: 46rpx;">{{money?money:0}}</text>
				</view>
				<view style="width: 80%;height: 1rpx;background: #fff;margin: 20rpx auto;"></view>
				<view style="width: 100%;display: flex;justify-content: center;">
					<u-message-input disabled-keyboard :value="pswd" dot-fill width="80"
						maxlength="6"></u-message-input>
				</view>
				<view style="width: 80%;height: 1rpx;background: #fff;margin: 20rpx auto;"></view>
				<view style="width: 100%;display: flex;flex-direction: column;">
					<u-table :padding="'0px 0px'">
						<u-tr>
							<u-td>
								<view @click="tapthd(1)" class="ttgd">
									1
								</view>
							</u-td>
							<u-td>
								<view @click="tapthd(2)" class="ttgd">
									2
								</view>
							</u-td>
							<u-td>
								<view @click="tapthd(3)" class="ttgd">
									3
								</view>
							</u-td>
						</u-tr>
						<u-tr>
							<u-td>
								<view @click="tapthd(4)" class="ttgd">
									4
								</view>
							</u-td>
							<u-td>
								<view @click="tapthd(5)" class="ttgd">
									5
								</view>
							</u-td>
							<u-td>
								<view @click="tapthd(6)" class="ttgd">
									6
								</view>
							</u-td>
						</u-tr>
						<u-tr>
							<u-td>
								<view @click="tapthd(7)" class="ttgd">
									7
								</view>
							</u-td>
							<u-td>
								<view @click="tapthd(8)" class="ttgd">
									8
								</view>
							</u-td>
							<u-td>
								<view @click="tapthd(9)" class="ttgd">
									9
								</view>
							</u-td>
						</u-tr>
						<u-tr>
							<u-td>
								<view class="ttgd" style="background: #e2e2e2;">

								</view>
							</u-td>
							<u-td>
								<view @click="tapthd(0)" class="ttgd">
									0
								</view>
							</u-td>
							<u-td>
								<view @click="backspace" class="ttgd" style="background: #e2e2e2;">
									<image src="/static/images/ttui.png" style="width: 50rpx;" mode="widthFix"></image>
								</view>
							</u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		sub
	} from '../../common/event';
	import moment from 'moment';
	export default {
		data() {
			return {
				id: '',
				user: {},
				relation: {},
				money: '',
				content: '',
				show: false,
				pswd: ''
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.user = this.$store.state.user.user
			this.getdata(id)
		},
		computed: {
			...mapState({

			})
		},
		watch: {
			pswd: function(v) {
				console.log(v)
				if (v.length >= 6) {
					this.checkpswd(v)
				}
			}
		},
		methods: {
			getdata: async function(id) {
				const ret = this.$store.state.friend.list.find(e => e.fid == id)
				this.relation = ret
			},
			saveuser: async function(id) {
				const pswd0 = this.$store.state.user.user.paypswd
				if (!pswd0) {
					uni.showModal({
						title: "设置密码",
						content: "请设置支付密码",
						showCancel: false,
						success() {
							uni.navigateTo({
								url: "/pages/user/setpaypswd"
							})
						}
					})
					return
				}
				if (!this.money || this.money <= 0) {
					return
				}
				this.show = true
			},
			checkpswd: async function(e) {
				const pswd0 = this.$store.state.user.user.paypswd
				if (e == pswd0) {
					this.sendredmsg()
				} else {
					uni.showToast({
						title: "密码错误",
						icon:"none"
					})
				}
			},
			sendredmsg: async function() {
				if(this.money < 1){
					return
				}
				if (this.$store.state.user.user.money < this.money) {
					uni.showToast({
						title: "余额不足",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "发送中..."
				})
				this.show = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					uni.hideLoading()
					return
				}

				const user = this.$store.state.user.user

				const data = {
					name: user.name,
					uid: user.id,
					toname: this.relation.name,
					toid: this.id,
					gid: 0,
					gname: '',
					type: 'redpacket',
					content: this.content ?? '恭喜发财',
					timelong: 0,
					time: moment().valueOf(),
					money: this.money,
					status: '正常',
					note: ''
				}
				const ret = await this.$u.post(`chat/chat/sendMessage`, data)
				await this.$u.post(`bgyx/bgyx/postdata/moneylog`, {
					name: user.name,
					uid: user.id,
					money: this.money,
					moneycurrent: user.money * 1 - this.money * 1,
					toname: this.relation.name,
					toid: this.id,
					status:'领取中',
					time:moment().valueOf(),
					gid:0,
					gname:'',
					count:1,
					mid:ret.data,
					type:'out'
				})

				data.id = ret.data
				console.log(ret)
				this.$store.commit(`message/addMessage`, data)
				const mmy = user.money * 1 - this.money * 1
				this.$store.commit(`user/setUserData`, {money:mmy})
				this.$u.post(`chat/chat/sendmoneydesc/${this.money}`)
				uni.hideLoading()
				uni.navigateBack()
			},
			tapthd: function(e) {
				if (this.pswd.length >= 6) {
					return
				}
				this.pswd = this.pswd + e
			},
			backspace: function() {
				if (!this.pswd) {
					return
				}
				this.pswd = this.pswd.substring(0, this.pswd.length - 1)
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F3F3F3;
		height: 100vh;
		overflow-y: auto;
		padding: 25rpx;
	}

	.ttgd {
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #222;
	}
</style>